
<template>
  <div class="deptdetail" :style="moreDetailStyle">
    <h1 style="margin-top:0">
      {{loadingtext}}
    </h1>
    <div v-show="mydeptinfo.b01&&mydeptinfo.b01.b0194!=='3'">
      <div v-show="!noright">
        <el-tabs v-model="activeName" @tab-click="handleClick" v-show="JSON.stringify(mydeptinfo)!=='{}'">
          <el-tab-pane label="基本信息" name="jigouxinxi">
            <UnitInfo v-bind:unitInfo='mydeptinfo' :style="moreDetailStyle"></UnitInfo>
          </el-tab-pane>
          <el-tab-pane label="职数与编制信息" name="zhishubianzhi">
            <UnitBz v-bind:unitInfo='mydeptinfo' :style="moreDetailStyle"></UnitBz>
          </el-tab-pane>
          <el-tab-pane label="人员配置" name="gangweirenyuan">
            <UnitRy v-bind:unitInfo='mydeptinfo' :style="moreDetailStyle"></UnitRy>
            <!-- <el-table :data="post" highlight-current-row v-loading="listLoading" style="width: 100%;" @sort-change='sortChange' :height="tableHeight" border>
              <el-table-column type="index" label=" " width="50" fixed align="center" class-name="tableth">
              </el-table-column>
              <el-table-column prop="post" label="职位" sortable="custom" width="200">
              </el-table-column>
              <el-table-column prop="name" label="姓名" min-width="250">
              </el-table-column>
              <el-table-column prop="type" label="编制类型" width="300" sortable="custom">
              </el-table-column>
              <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                  <el-button size="small" @click="docdownload(scope.row.filename)" type="text" icon="el-icon-search">查看人员信息</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="block">
              <el-pagination :total="totalnum" :page-size="pagenum" @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
            </div> -->
          </el-tab-pane>
          <el-tab-pane label="单位职责" name="danweizhize">
            <div :style="moreDetailStyle" class="zhize">
              <el-scrollbar style="height: calc(100% + 17px);" v-if="mydeptinfo.b0177">
                <div style="padding:20px;" v-html="mydeptinfo.b0177.zhize"></div>
              </el-scrollbar>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div v-show="noright">
        <el-tabs v-model="activeName0" @tab-click="handleClick" v-show="JSON.stringify(mydeptinfo)!=='{}'">
          <el-tab-pane label="基本信息" name="jigouxinxi">
            <UnitInfo v-bind:unitInfo='mydeptinfo' :style="moreDetailStyle"></UnitInfo>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div v-show="mydeptinfo.b01&&mydeptinfo.b01.b0194==='3'">
      <el-tabs v-model="activeName0" @tab-click="handleClick" v-show="JSON.stringify(mydeptinfo)!=='{}'">
        <el-tab-pane label="基本信息" name="jigouxinxi">
          <UnitInfo v-bind:unitInfo='mydeptinfo' :style="moreDetailStyle"></UnitInfo>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import getunits from '@/js/common.js'
import UnitInfo from '@/dept/moreDetail.vue'
import UnitBz from '@/dept/moreDetailBz.vue'
import UnitRy from '@/dept/moreDetailRy.vue'
export default {
  components: {
    UnitInfo,
    UnitBz,
    UnitRy
  },
  name: 'HelloWorld',
  watch: {
    mydeptid (val) {
      console.log('子组件单位id：' + val)
      this.deptid = val
      this.getdept(val)
      this.setheight(this)
    }
    // $refs.tree2.getCurrentNode()
  },
  props: {
    mydeptid: ''
  },
  data () {
    return {
      noright: false,
      post: [],
      moreDetailStyle: 'height:0px',
      deptid: '',
      mypersonid: '',
      showpersonVisible: false,
      loadingtext: '选择左侧树中节点查看详细信息',
      depteditVisible: false,
      depteditBtnsVisible: false,
      bzfenleioptions: {},
      bzshenfenoptions: {},
      bzzhiwuoptions: {},
      totalnum: 0,
      mydeptinfo: {},
      activeName: 'jigouxinxi',
      activeName0: 'jigouxinxi',
      editLoading: false,
      bzlistLoading: false,
      bz: [],
      deptlistLoading: false,
      dept: [],
      total: 0,
      page: 1,
      pagenum: 5,
      deptCurrentRow: '',
      mydeptEdit: false,
      timestamp: '',
      listLoading: false,
      Isace: true,
      Sortkey: '',
      tableHeight: 100
    }
  },
  methods: {
    handleSizeChange (val) {
      this.pagenum = val
      this.getZhidu()
    },
    handleCurrentChange (val) {
      this.page = val
      this.getZhidu()
    },
    setheight (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.moreDetailStyle = 'height:' + (clientHeight - 210) + 'px'
      obj.tableHeight = clientHeight - 243
    },
    querySearch (queryString, cb) {
      return getunits(this, queryString, cb)
    },
    setCurrent (row) {
      this.$refs.xiashutable.setCurrentRow(row)
    },
    haverow () {
      if (this.mydeptinfo.MyChildren && this.deptCurrentRow) {
        for (var i = 0; i < this.mydeptinfo.MyChildren.length; i++) {
          if (this.mydeptinfo.MyChildren[i].id === this.deptCurrentRow.id) {
            return true
          }
        }
      }
      return false
    },
    chooserow () {
      if (this.mydeptinfo.MyChildren && this.deptCurrentRow) {
        console.log('测试是否执行')
        for (var i = 0; i < this.mydeptinfo.MyChildren.length; i++) {
          console.log(this.mydeptinfo.MyChildren[i])
          if (this.mydeptinfo.MyChildren[i].id === this.deptCurrentRow.id) {
            this.deptCurrentRow = this.mydeptinfo.MyChildren[i]
            this.$refs.xiashutable.setCurrentRow(this.deptCurrentRow)
          }
        }
      }
    },
    noticeparent () {
      this.$emit('treefreshevent', this.mydeptinfo.MyChildren)
    },
    noticeparentname (name) {
      this.$emit('treefreshnameevent', name)
    },
    dateFormat2: function (mydate) {
      const daterc = mydate
      if (daterc === undefined) {
        return ''
      }
      console.log(daterc)
      if (daterc != null) {
        const dateMat = new Date(daterc)
        const year = dateMat.getFullYear()
        const month = dateMat.getMonth() + 1
        const day = dateMat.getDate()
        const timeFormat = year + '-' + month + '-' + day
        return timeFormat
      }
    },
    getdept (id) {
      var _this = this
      this.mydeptinfo = {}
      this.loadingtext = '正在加载中，请稍后...'
      this.deptlistLoading = true
      this.$http
        .get(`/binfo/in/` + id)
        .then(function (response) {
          _this.deptlistLoading = false
          _this.noright = response.data.noright
          _this.mydeptinfo = response.data
          _this.loadingtext = _this.mydeptinfo.b01.b0101
          if (_this.noright) {
            _this.loadingtext = _this.loadingtext + '（无权限）'
          }
        })
        .catch(function (error) {
          console.log(error)
          _this.loadingtext = '网络获取失败' + error
        })
    },
    handleClick (tab, event) {
    },
    searchPerson () {
      this.page = 1
      this.getPersons()
    },
    // 排序
    sortChange: function (column, prop, order) {
      this.Sortkey = column.prop
      if (column.order === 'ascending') {
        this.Isace = true
      } else {
        this.Isace = false
      }
      this.getPersons()
    }
  },
  mounted () {
    let _this = this
    window.onresize = function windowResize () {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      _this.setheight(_this)
      console.log('test0:' + _this.moreDetailStyle)
    }
  }
}
</script>
<style>
#deptdetail .el-pagination{
  float: left;
  padding:7px 10px;
}
#deptdetail h1{
  height: 30px;
  border-bottom: 1px solid #95B8E7;
  font-family: '宋体';
  line-height: 30px;
  font-size:var(--size14) !important;
  color: #000;
  padding-left:10px;
  background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
  margin-bottom:0;
}
#deptdetail .el-tabs__header{
  height: 29px;
  background: #FAFAFA;
  line-height: 30px;
  font-family: '宋体';
  padding:0 20px;
  border-bottom: 2px solid #E4E7ED;
  margin:0;
}
#deptdetail .el-tabs__item{
  line-height: 30px;
  height: 30px;
  font-weight:bolder;
}
#deptdetail .mytable table{
  border-top: 1px solid #74A6CC;
  border-left: 1px solid #74A6CC;
  margin: 10px;
  width: calc(100% - 20px);
}
#deptdetail .mytable th,
#deptdetail .mytable td{
  padding: 10px;
  border-right: 1px solid #74A6CC;
  border-bottom: 1px solid #74A6CC;
  vertical-align:top;
  line-height: 150%;
}
#deptdetail .mytable th{
  background:#C0DCF1;
}
#deptdetail .el-table th{
    font-weight: normal;
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
  }
#deptdetail .el-table td, .el-table th{
    padding:0;
    font-size:var(--size14) !important;
    line-height: 20px;
    font-family: '宋体'
  }
  .tableth{
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
  }
.bztable{
  text-align: center
}
#deptdetail .bztable th{
  vertical-align:middle;
}
#deptdetail .detailinfotable th{
  width:200px;
}
.zhize{
  line-height: 200%;
}
</style>
